<template>
	<view>
		<navbar></navbar>
		<view class="container">
			<view class="Top_tilte">
				银行卡管理
			</view>
			<view class="List_entrance">
				<view class="List_item" v-for="(item,index) in InputList" :key='index'
					:class=" index != 3 ? 'Bottom_boder' : ''">
					<view style="width: 200rpx;">
						{{item.title}}
					</view>
					<view class="input" v-if="index != 3">
						<input type="text" disabled v-model="item.value" />
					</view>
					<view class="c-password-input-box" v-else>
						<view>
							<PwdControl style='' />
						</view>
					</view>
				</view>
			</view>
			<view class="Submit1" v-if="!isBTN">
				解绑
			</view>
			<view class="Submit" v-else @tap.stop.prevent='Submit'>
				解绑
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
		import PwdControl from '@/components/PwdControl/index.vue'
	export default {
		components: {
			PwdControl
		},
		data() {
			return {
				InputList: [{
						title: '卡号',
						value: '',
						placeholder: '请输入银行卡号'
					},
					{
						title: '银行卡类型',
						value: '',
						placeholder: '请输入银行卡类型'
					},
					{
						title: '银行预留手机号',
						value: '',
						placeholder: '请输入银行卡预留手机号'
					},
					{
						title: '开户密码',
						value: '',
						placeholder: '请输入银行卡开户密码'
					}
				],
				Bank: '',
				isBTN: false,
				password: '', //加密密码
				token: '',
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			console.log(this.$store.state)
			this.token = uni.getStorageSync('token')
			this.$nextTick(() => {
				window.pwdcontrol = undefined
				window.getRandom()
			})
			this.initialization()
			
		},
		onShow() {
			
		},
		onPullDownRefresh() {
			console.log('下拉刷新')
			uni.stopPullDownRefresh();
		},
		mounted() {
			
			// this.$nextTick(() => {
			// 	this.getRandom()
			// })
		},
		methods: {
			
			initialization(){
				let res = this.$store.state
				this.InputList[0].value = res.PassBank
				this.InputList[1].value = res.bankName
				this.InputList[2].value = res.bankPhone
				
				this.Bank = res.bank
				if (res.bankIndex > 1) {
					this.isBTN = true
				} else {
					this.isBTN = false
				}
			},
			Submit() {
				console.log(window.pwdcontrol)
				if (window.pwdcontrol) {
					this.isBTN = false
					console.log(this.InputList)
					this.password = window.pwdcontrol
					let _this = this
					app._post_form('Banklist/unlinkedacct', {
						token: _this.token,
						linked_acctno: _this.Bank,
						password: _this.password,
						random_key: window.random.random_key
					}, function(result) {
						if (1 == result.code) {
							app.showError('解绑成功');
							uni.redirectTo({
								url: `../index`
							});
							
						}else{
							_this.isBTN = true
						}
					}, null, function() {
						// 解除按钮禁用
						_this.isBTN = true
						app.showError(result.msg);
						_this.initialization()
					});
				} else {
					// this.initialization()
					_this.isBTN = true
					app.showError('开户密码错误，请稍后重试');
				}

			},
		}
	}
</script>

<style lang="scss">
	.container {
		height: 100vh;
	}

	.Bottom_boder {
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
	}

	.Top_tilte {
		margin-top: 40rpx;
		width: 100%;
		height: 80rpx;
		background-color: #FFFFFF;
		text-align: center;
		color: rgba(0, 0, 0, 0.9);
		font-size: 30rpx;
		font-family: 'dy-iconfont';
		font-weight: bold;
		line-height: 80rpx;
	}

	.List_entrance {
		margin: 0 30rpx;
		margin-top: 50rpx;
		border-radius: 20rpx;
		background-color: #FFFFFF;
		box-shadow: 0rpx 4rpx 6rpx 1rpx rgba(0, 0, 0, 0.02);
		padding: 0 30rpx;

		.List_item {
			height: 100rpx;
			background-color: #FFF;
			display: flex;
			align-items: center;
			// justify-content: space-between;
			font-size: 28rpx;
			font-weight: 400;
			color: rgba(0, 0, 0, 0.9);

			input {
				width: 320rpx;
				font-size: 28rpx
			}
		}
	}

	.Submit {
		width: 92%;
		margin: 0 30rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		background-color: #f00;
		color: #fff;
		position: fixed;
		bottom: 114rpx;
		border-radius: 10rpx;
	}

	.Submit1 {
		width: 92%;
		margin: 0 30rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		background-color: #999;
		color: #fff;
		position: fixed;
		bottom: 114rpx;
		border-radius: 10rpx;
	}
</style>
